<extend name="Base/common"/>

<block name="style">
	<!-- main.css -->
    <link href="__CSS__/static_home.min.css" rel="stylesheet" type="text/css"/>
</block>

<block name="body">
	<section id='section1'>
	<!--顶部大图-->
		<div class="muucmfHead">
			<div class="container">
				<div class="headInfo">
				    <h2><span>MuuCmf</span> 开源后端开发框架</h2>

				    <h3><span>MuuCmf</span> Open Source Management Framework</h3>

				    <h3>包罗万象 自由组合</h3>
					<p class="downBtn">
						<a href="http://www.muucmf.cn/muucmf/download" class="btn btn-lg btn-info" type="button">MuuCmf v1 下载</a>
						<a href="https://gitee.com/dameng100/muucmf" class="btn btn-lg btn-info" type="button" target="_blank">Gitee</a>
				    	<a href="http://www.muucmf.cn/muucmf/index/document" class="btn btn-lg btn-info" type="button" target="_blank">在线手册</a>
					</p>
				</div>
			</div>
			<canvas id="canvas" width="1950px" height="800px"></canvas>
			<canvas id="canvasbg" width="1950px" height="800px"></canvas>
		</div>
	</section>

	<section id='section3'>
		<div class="descBox clearfix">
			<div class="Info text-center">
			    <h2>MUU让你更专注你的核心业务需求</h2>
			    <hr class="light">
			    	<div class="cont">
				    	<p>MuuCmf是一个将CMS和Framework两个概念完美结合的内容管理系统，提供了丰富的系统功能。开发人员只需要专注于业务系统的开发，或通过MuuCmf应用商店下载你需要的模块实现更快部署...</p>
				    </div>

				<div class="container">
			    	<div class="col-md-4 col-xs-6">
			    		<div class="class iconbox1">
			    		<div class="icon">
			    			<i class="icon-user"></i>
			    		</div> 
			    		<h3>用户&角色</h3>
			    		<p>可为用户划分角色，授予不同权限</p>
			    		</div>
			    	</div>
			    	<div class="col-md-4 col-xs-6">
			    		<div class="class iconbox2">
			    		<div class="icon">
			    			<i class="icon-laptop"></i>
			    		</div>
			    		<h3>运营</h3>
			    		<p>包括公告、消息机制、全局广告位管理、群发等</p>
			    		</div>
			    	</div>
			    	<div class="col-md-4 col-xs-6">
			    		<div class="class iconbox3">
			    		<div class="icon">
			    			<i class="icon-shield"></i> 
			    		</div>
			    		<h3>安全</h3>
			    		<p>包括积分安全、用户行为数据、数据安全等</p>
			    		</div>
			    	</div>
			    	<div class="col-md-4 col-xs-6">
			    		<div class="class iconbox4">
			    		<div class="icon">
			    			<i class="icon-windows"></i>
			    		</div>
			    		<h3>系统</h3>
			    		<p>可设置系统、配置管理、全局/用户导航等</p>
			    		</div>
			    	</div>
			    	<div class="col-md-4 col-xs-6">
			    		<div class="class iconbox5">
			    		<div class="icon">
			    			<i class="icon-cloud"></i>
			    		</div>
			    		<h3>扩展</h3>
			    		<p>可在线升级系统、应用商店、安装/卸载模块插件等</p>
			    		</div>
			    	</div>
			    	<div class="col-md-4 col-xs-6">
			    		<div class="class iconbox6">
			    		<div class="icon">
			    			<i class="icon-cloud"></i>
			    		</div>
			    		<h3>更多</h3>
			    		<p>更多精彩，等待你的发掘</p>
			    		</div>
			    	</div>
				</div>
			</div>
		</div>
	</section>

	<section id='section_ecology'>
		<div class="container">
			<div class="descBox clearfix">
				<div class="Info text-center">
				    <h2>MuuCmf标准化生态</h2>
				    <hr class="light">
				    <div class="cont">
				    	<p>在优雅的社区成长 共建MuuCmf新生态</p>  
				    </div>
				    <div class="ecology">
				    	<div class="item">
							MuuCmf
				    	</div>
				    	<span class="add">+</span>
				    	<div class="item">
							开发者社区
				    	</div>
						<span class="add">+</span>
				    	<div class="item">
							应用商店
				    	</div>
				    	<span class="add">+</span>
				    	<div class="item">
							Muu+计划
				    	</div>

				    </div>
				    
				</div>
			</div>
		</div>
	</section>

	<section id='section5'>
		<div class="container">
			<div class="descBox clearfix">
				<div class="Info text-center">
				    <h2>持续探索产品新特性</h2>
				    <hr class="light">
				    <div class="cont">
				    	<p>不止于开发 更注重产品迭代</p>
				    </div>
				    <div class="service-box">
					    <div class="col-md-4 col-sm-6 col-xs-6">
		                    <div class="single-service s1 clearfix">
		                    	<div class="service-title pull-left">
		                            <i class="icon icon-cubes"></i>
		                        </div>
		                        <div class="service-content text-left">
		                            <h3>模块化、插件化</h3>
		                            <p>不管是开发一个小功能还是一个全新的系统，在MuuCmf中你只是增加了一个应用，独立运行互不影响，便于灵活扩展和二次开发</p>   
		                        </div>
		                    </div>
		                </div>

		                <div class="col-md-4 col-sm-6 col-xs-6">
		                    <div class="single-service s2 clearfix">
		                    	<div class="service-title pull-left">
		                            <i class="icon icon-window-alt"></i>
		                        </div>
		                        <div class="service-content text-left">
		                            <h3>Builder机制</h3>
		                            <p>后端页面Builder自动生成机制 后台进入极速开发时代。几行代码生成专业后台管理界面</p>    
		                        </div>
		                    </div>
		                </div>

		                <div class="col-md-4 col-sm-6 col-xs-6">
		                    <div class="single-service s3 clearfix">
		                    	<div class="service-title pull-left">
		                            <i class="icon icon-cogs"></i>
		                        </div>
		                        <div class="service-content text-left">
		                            <h3>Restful Api </h3>
		                            <p>系统内置RestfulApi模块，RestfulApi实现了签名验证、用户注册/登陆、修改资料、消息机制、短信验证等基础功能</p>   
		                        </div>
		                    </div>
		                </div>

		                <div class="col-md-4 col-sm-6 col-xs-6">
		                    <div class="single-service s4 clearfix">
		                    	<div class="service-title pull-left">
		                            <i class="icon icon-cloud"></i>
		                        </div>
		                        <div class="service-content text-left">
		                            <h3>云端部署</h3>
		                            <p>通过驱动或镜像的方式可以轻松支持云平台的快速部署</p>   
		                        </div>
		                    </div>
		                </div>

		                <div class="col-md-4 col-sm-6 col-xs-6">
		                    <div class="single-service s5 clearfix">
		                    	<div class="service-title pull-left">
		                            <i class="icon icon-level-up"></i>
		                        </div>
		                        <div class="service-content text-left">
		                            <h3>云端升级</h3>
		                            <p>云端一键升级,定期产品更新迭代，系统升级更便捷</p>   
		                        </div>
		                    </div>
		                </div>

		                <div class="col-md-4 col-sm-6 col-xs-6">
		                    <div class="single-service s6 clearfix">
		                    	<div class="service-title pull-left">
		                            <i class="icon icon-terminal"></i>
		                        </div>
		                        <div class="service-content text-left">
		                            <h3>代码开源</h3>
		                            <p>代码完全开放、开源，对商业使用友好</p>   
		                        </div>
		                    </div>
		                </div>

				    </div>
				</div>
			</div>
		</div>
	</section>


	<section id='section7'>
		<div class="filter"></div>
		<div class="container">
			<div class="descBox">
				<div class="Info text-center">
					<span class="logo"><img src="__IMG__/120x120icon.png" /></span>
				    <h2>跨越前后端的技术界限</h2>
				    <hr class="light">
				    <div class="title">
				    	开放 自由 连接一切
				    </div>
				    <div class="simply-icon">
				    	
				    	<div class="simply-section">
				    		<div><i class="icon icon-desktop"></i></div>
				    	</div>
				    	<div class="simply-section">
				    		<div><i class="icon icon-tablet"></i></div>
				    	</div>
				    	<div class="simply-section">
				    		<div><i class="icon icon-mobile"></i></div>
				    	</div>
				    	<div class="simply-section">
				    		<div><i class="icon icon-comments"></i></div>
				    	</div>
				    	<div class="simply-section">
				    		<div><i class="icon icon-ellipsis-h"></i></div>
				    	</div>

					</div>
				</div>
			</div>
		</div>
	</section>

</block>
<block name="script">
<script src="__JS__/home.js"></script>
<script>
// min and max radius, radius threshold and percentage of filled circles
var radMin = 5,
  radMax = 125,
  filledCircle = 60, //percentage of filled circles
  concentricCircle = 30, //percentage of concentric circles
  radThreshold = 25; //IFF special, over this radius concentric, otherwise filled

//min and max speed to move
var speedMin = 0.3,
  speedMax = 2.5;

//max reachable opacity for every circle and blur effect
var maxOpacity = 0.6;

//default palette choice
var colors = ['52,168,83', '117,95,147', '199,108,23', '194,62,55', '0,172,212', '120,120,120'],
  bgColors = ['52,168,83', '117,95,147', '199,108,23', '194,62,55', '0,172,212', '120,120,120'],
  circleBorder = 10,
  backgroundLine = bgColors[0];
var backgroundMlt = 0.85;

//min distance for links
var linkDist = Math.min(canvas.width, canvas.height) / 2.4,
  lineBorder = 2.5;

//most importantly: number of overall circles and arrays containing them
var maxCircles = 12,
  points = [],
  pointsBack = [];

//populating the screen
for (var i = 0; i < maxCircles * 2; i++) points.push(new Circle());
for (var i = 0; i < maxCircles; i++) pointsBack.push(new Circle(true));

//experimental vars
var circleExp = 1,
  circleExpMax = 1.003,
  circleExpMin = 0.997,
  circleExpSp = 0.00004,
  circlePulse = false;

//circle class
function Circle(background) {
  //if background, it has different rules
  this.background = (background || false);
  this.x = randRange(-canvas.width / 2, canvas.width / 2);
  this.y = randRange(-canvas.height / 2, canvas.height / 2);
  this.radius = background ? hyperRange(radMin, radMax) * backgroundMlt : hyperRange(radMin, radMax);
  this.filled = this.radius < radThreshold ? (randint(0, 100) > filledCircle ? false : 'full') : (randint(0, 100) > concentricCircle ? false : 'concentric');
  this.color = background ? bgColors[randint(0, bgColors.length - 1)] : colors[randint(0, colors.length - 1)];
  this.borderColor = background ? bgColors[randint(0, bgColors.length - 1)] : colors[randint(0, colors.length - 1)];
  this.opacity = 0.05;
  this.speed = (background ? randRange(speedMin, speedMax) / backgroundMlt : randRange(speedMin, speedMax)); // * (radMin / this.radius);
  this.speedAngle = Math.random() * 2 * Math.PI;
  this.speedx = Math.cos(this.speedAngle) * this.speed;
  this.speedy = Math.sin(this.speedAngle) * this.speed;
  var spacex = Math.abs((this.x - (this.speedx < 0 ? -1 : 1) * (canvas.width / 2 + this.radius)) / this.speedx),
    spacey = Math.abs((this.y - (this.speedy < 0 ? -1 : 1) * (canvas.height / 2 + this.radius)) / this.speedy);
  this.ttl = Math.min(spacex, spacey);
};

Circle.prototype.init = function() {
  Circle.call(this, this.background);
}

//support functions
//generate random int a<=x<=b
function randint(a, b) {
    return Math.floor(Math.random() * (b - a + 1) + a);
  }
  //generate random float
function randRange(a, b) {
    return Math.random() * (b - a) + a;
  }
  //generate random float more likely to be close to a
function hyperRange(a, b) {
  return Math.random() * Math.random() * Math.random() * (b - a) + a;
}

//rendering function
function drawCircle(ctx, circle) {
  //circle.radius *= circleExp;
  var radius = circle.background ? circle.radius *= circleExp : circle.radius /= circleExp;
  ctx.beginPath();
  ctx.arc(circle.x, circle.y, radius * circleExp, 0, 2 * Math.PI, false);
  ctx.lineWidth = Math.max(1, circleBorder * (radMin - circle.radius) / (radMin - radMax));
  ctx.strokeStyle = ['rgba(', circle.borderColor, ',', circle.opacity, ')'].join('');
  if (circle.filled == 'full') {
    ctx.fillStyle = ['rgba(', circle.borderColor, ',', circle.background ? circle.opacity * 0.8 : circle.opacity, ')'].join('');
    ctx.fill();
    ctx.lineWidth=0;
    ctx.strokeStyle = ['rgba(', circle.borderColor, ',', 0, ')'].join('');
  }
  ctx.stroke();
  if (circle.filled == 'concentric') {
    ctx.beginPath();
    ctx.arc(circle.x, circle.y, radius / 2, 0, 2 * Math.PI, false);
    ctx.lineWidth = Math.max(1, circleBorder * (radMin - circle.radius) / (radMin - radMax));
    ctx.strokeStyle = ['rgba(', circle.color, ',', circle.opacity, ')'].join('');
    ctx.stroke();
  }
  circle.x += circle.speedx;
  circle.y += circle.speedy;
  if (circle.opacity < (circle.background ? maxOpacity : 1)) circle.opacity += 0.01;
  circle.ttl--;
}

//initializing function
function init() {
  window.requestAnimationFrame(draw);
}

//rendering function
function draw() {

  if (circlePulse) {
    if (circleExp < circleExpMin || circleExp > circleExpMax) circleExpSp *= -1;
    circleExp += circleExpSp;
  }
  var ctxfr = document.getElementById('canvas').getContext('2d');
  var ctxbg = document.getElementById('canvasbg').getContext('2d');

  ctxfr.globalCompositeOperation = 'destination-over';
  ctxfr.clearRect(0, 0, canvas.width, canvas.height); // clear canvas
  ctxbg.globalCompositeOperation = 'destination-over';
  ctxbg.clearRect(0, 0, canvas.width, canvas.height); // clear canvas

  ctxfr.save();
  ctxfr.translate(canvas.width / 2, canvas.height / 2);
  ctxbg.save();
  ctxbg.translate(canvas.width / 2, canvas.height / 2);

  //function to render each single circle, its connections and to manage its out of boundaries replacement
  function renderPoints(ctx, arr) {
    for (var i = 0; i < arr.length; i++) {
      var circle = arr[i];
      //checking if out of boundaries
      if (circle.ttl<0) {}
      var xEscape = canvas.width / 2 + circle.radius,
        yEscape = canvas.height / 2 + circle.radius;
      if (circle.ttl < -20) arr[i].init(arr[i].background);
      //if (Math.abs(circle.y) > yEscape || Math.abs(circle.x) > xEscape) arr[i].init(arr[i].background);
      drawCircle(ctx, circle);
    }
    for (var i = 0; i < arr.length - 1; i++) {
      for (var j = i + 1; j < arr.length; j++) {
        var deltax = arr[i].x - arr[j].x;
        var deltay = arr[i].y - arr[j].y;
        var dist = Math.pow(Math.pow(deltax, 2) + Math.pow(deltay, 2), 0.5);
        //if the circles are overlapping, no laser connecting them
        if (dist <= arr[i].radius + arr[j].radius) continue;
        //otherwise we connect them only if the dist is < linkDist
        if (dist < linkDist) {
          var xi = (arr[i].x < arr[j].x ? 1 : -1) * Math.abs(arr[i].radius * deltax / dist);
          var yi = (arr[i].y < arr[j].y ? 1 : -1) * Math.abs(arr[i].radius * deltay / dist);
          var xj = (arr[i].x < arr[j].x ? -1 : 1) * Math.abs(arr[j].radius * deltax / dist);
          var yj = (arr[i].y < arr[j].y ? -1 : 1) * Math.abs(arr[j].radius * deltay / dist);
          ctx.beginPath();
          ctx.moveTo(arr[i].x + xi, arr[i].y + yi);
          ctx.lineTo(arr[j].x + xj, arr[j].y + yj);
          var samecolor = arr[i].color == arr[j].color;
          ctx.strokeStyle = ["rgba(", arr[i].borderColor, ",", Math.min(arr[i].opacity, arr[j].opacity) * ((linkDist - dist) / linkDist), ")"].join("");
          ctx.lineWidth = (arr[i].background ? lineBorder * backgroundMlt : lineBorder) * ((linkDist - dist) / linkDist); //*((linkDist-dist)/linkDist);
          ctx.stroke();
        }
      }
    }
  }

  var startTime = Date.now();
  renderPoints(ctxfr, points);
  renderPoints(ctxbg, pointsBack);
  deltaT = Date.now() - startTime;

  ctxfr.restore();
  ctxbg.restore();

  window.requestAnimationFrame(draw);
}

init();

/*Credits and aknowledgements:
Original Idea and Design by Luca Luzzatti

Optimizing tips from Benjamin K?stner
General tips from Salvatore Previti*/
</script>
</block>
